<template>
  <div>App</div>
  <ul>
    <li><router-link to="/home">Home</router-link></li>
    <li><router-link :to="{ name: 'Home' }">Home</router-link></li>
    <li><button @click="goAbout">About</button></li>
    <li>
      <router-link :to="{ name: 'Detail', params: { id: 111 } }">
        Detail
      </router-link>
    </li>
  </ul>

  <!-- 缓存路由组件 -->
  <!-- 
      根据路由路径来自动加载渲染路由组件 
      只能渲染一级路由

      1. <router-view></router-view> 直接使用，加载渲染对应路由组件

      2. <router-view>xxx</router-view> 传递默认插槽，插槽内容是什么，就渲染什么
        本来router-view内部默认渲染Component组件（Component组件就是对应的路由组件）
        因为传递了默认插槽，所有就不会渲染了，但是将想要渲染的Component通过作用域插槽形式传递

      component特殊元素，本身什么也不渲染
        属性 is，is属性的值，就是component要渲染的内容
       component渲染的实际就是路由组件
    -->
  <!-- <router-view> -->
  <!-- <template v-slot="{ Component }"> -->
  <!-- <keep-alive include="Home,About"> -->
  <!-- <keep-alive :include="['Home', 'About']"> -->
  <!-- <keep-alive :exclude="['Home']" :max="10"> -->
  <!-- <component :is="Component" /> -->
  <!-- </keep-alive> -->
  <!-- </template> -->
  <!-- </router-view> -->

  <!-- 
    vue2 
      显示 - 隐藏  leave
        v-leave
        v-leave-active
        v-leave-to
      隐藏 - 显示  enter
        v-enter
        v-enter-active
        v-enter-to

    vue3
      显示 - 隐藏  leave
        v-leave-from
        v-leave-active
        v-leave-to
      隐藏 - 显示  enter
        v-enter-from
        v-enter-active
        v-enter-to
   -->
  <!-- <router-view>
    <template v-slot="{ Component }">
      <transition>
        <component :is="Component" />
      </transition>
    </template>
  </router-view> -->

  <!-- <router-view>
    <template v-slot="{ Component }">
      <transition>
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </transition>
    </template>
  </router-view> -->

  <router-view v-slot="{ Component }">
    <transition>
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </transition>
  </router-view>
</template>

<script lang="ts" setup>
/*
  1. 路由配置
  2. 路由跳转方式
    声明式导航 router-link 
    编程式导航 
      选项式API this.$router.push
      组合式API const router = useRouter(); router.push
  3. 路由传参
    params
      - 配置路由
        /xxx/:id
      - 传递参数
        { name: 'Detail', params: { id: 111 } }
      - 接受使用
         const route = useRoute();
         route.params.id
    query
      - 传递参数
        {
          name: "About",
          query: {
            name: "jack",
            age: 18,
          },
        }
      - 接受使用
        const route = useRoute();
        route.query
    meta
      - 配置路由
        meta: { title: xxx }
      - 接受使用
        const route = useRoute();
        route.meta
  4. 路由懒加载
    默认情况下，所有组件都会打包到一个js文件中，所以导致页面加载时会加载所有组件，体积大，速度慢
    
    原理：
        1. 代码分割：将路由组件单独打包成一个js文件
        2. 按需加载：需要使用哪个路由组件时，再加载这个路由组件

    语法：() => import('xxx')
  5. 路由导航守卫
    全局路由导航守卫
        beforeEach((to, from, next) => {})
    路由独享守卫
    组件独享守卫
    
    作用：权限控制
  6. 缓存路由组件
    keep-alive + transition 
*/
import { useRouter } from "vue-router";

const router = useRouter();

const goAbout = () => {
  // router.push("/about");
  router.push({
    name: "About",
    query: {
      name: "jack",
      age: 18,
    },
  });
};
</script>

<style scoped>
.v-leave-from {
  opacity: 1;
}

.v-leave-active {
  transition: opacity 1s;
}

.v-leave-to {
  opacity: 0;
}

.v-enter-from {
  opacity: 0;
}

.v-enter-active {
  transition: opacity 1s;
}

.v-enter-to {
  opacity: 1;
}
</style>
